<div class="row">
  <div class="col-12">
    <nb-card>
      <nb-card-header>
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h5>变量管理</h5>
            <small class="text-muted" *ngIf="activeCluster">
              集群: {{ activeCluster.name }} | 系统和会话变量
            </small>
            <small class="text-muted" *ngIf="!activeCluster">
              请先选择集群
            </small>
          </div>
          <div>
            <button nbButton status="primary" size="small" (click)="refresh()" [disabled]="loading || !clusterId">
              <nb-icon icon="refresh-outline"></nb-icon>
              刷新
            </button>
          </div>
        </div>
      </nb-card-header>
      <nb-card-body>
        <!-- Filters -->
        <div class="row mb-3">
          <div class="col-md-6">
            <div class="form-group">
              <label for="search" class="label">Search Variables</label>
              <input
                type="text"
                nbInput
                fullWidth
                id="search"
                placeholder="Search variables..."
                [(ngModel)]="searchText"
                (keyup.enter)="onSearch()"
              />
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label class="label">Variable Type</label>
              <nb-select fullWidth [(selected)]="variableType" (selectedChange)="onTypeChange()">
                <nb-option value="global">Global Variables</nb-option>
                <nb-option value="session">Session Variables</nb-option>
              </nb-select>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label class="label">&nbsp;</label>
              <button nbButton status="primary" fullWidth (click)="onSearch()" [disabled]="loading || !clusterId">
                <nb-icon icon="search-outline"></nb-icon>
                搜索
              </button>
            </div>
          </div>
        </div>

        <div *ngIf="loading" class="text-center py-4">
          <nb-spinner size="large" status="primary"></nb-spinner>
          <p class="mt-3 text-muted">Loading variables...</p>
        </div>

        <div *ngIf="!loading && variables.length === 0">
          <nb-alert status="info">
            <p class="mb-0">
              <nb-icon icon="info-outline"></nb-icon>
              No variables found. Try adjusting your search criteria.
            </p>
          </nb-alert>
        </div>

        <ng2-smart-table
          *ngIf="!loading && variables.length > 0"
          [settings]="settings"
          [source]="source"
          (edit)="onEdit($event)"
        ></ng2-smart-table>

        <div *ngIf="!loading && variables.length > 0" class="mt-3">
          <nb-alert status="warning">
            <p class="mb-0">
              <nb-icon icon="alert-triangle-outline"></nb-icon>
              <strong>Warning:</strong> Modifying system variables may affect cluster behavior. 
              Please consult the StarRocks documentation before making changes.
            </p>
          </nb-alert>
        </div>
      </nb-card-body>
    </nb-card>
  </div>
</div>

